<template>
    <div class="home">
        <img :src="homeBG" style="width: 100vw;height: 100vh;"/>
        <img :src="homeCenter" class="centerPic" @click="gotoMake"/>
        <div class="gotoMake">
            <img :src="sliderBG" style="width: 100%;height: 100%;" />
            <van-slider active-color="transparent" inactive-color="transparent" v-model="slidervalue" @change="ChangeStart" class="sliderModel">
                <template #button>
                  <img :src="slider"  style="width: 113px;height: 48px;margin-top: 8px;"/>
                </template>
            </van-slider>
            <img :src="sliderLeft" class="sliderLeft"/>
        </div>
        <div class="meanList">
            <img :src="meanBG" style="width: 100%;height: 100%;"/>
            <div class="chooseMean">
                <img :src="homeIcon_action" style="width: 51px;height: 51px;"/>
                <img :src="history" style="width: 51px;height: 51px;" @click="gotoHistory"/>
                <img :src="storeIcon" style="width: 51px;height: 51px;" @click="gotoStore"/>
            </div>
        </div>
    </div>

</template>

<script setup>
import { onMounted, ref } from "vue";
import homeBG from "../assets/home/homeBG.png"
import homeCenter from "../assets/home/homeCenter.png"
import sliderBG from "../assets/home/sliderBG.png"
import slider from "../assets/home/slider.png"
import sliderLeft from "../assets/home/left.png"
import homeIcon_action from '../assets/homeIcon_action.png'
import history from "../assets/historyIcon.png"
import storeIcon from "../assets/storeIcon.png"
import meanBG from "../assets/meanBG.png"
import { useRouter } from "vue-router";
const router = useRouter()
let slidervalue = ref(0)
const ChangeStart = (val) => {
    if (val == 100) {
        router.push('/makeLED')
    }else {
        slidervalue.value = 0 
    }
}
const gotoStore = () => {
    router.push('/store')
}
const gotoHistory = () => {
    router.push('/history')
}
const gotoMake = () => {
    router.push('/makeLED')
}
onMounted(() => {
    if(!localStorage.getItem('isFirst')) {
        localStorage.setItem('LEDWork', 20)
        localStorage.setItem('isFirst', 1)
	}
})
</script>

<style scoped>
.home {
    width: 100vw;
    min-height: 812px;
    /* height: 100vh; */
    position: relative;
}
.centerPic {
    width: 80%;
    height: 55vh;
    position: absolute;
    /* top: 210px; */
    top: 24vh;
    left: 50%;
    transform: translateX(-50%);
}
.gotoMake {
    width: 275px;
    height: 48px;
    position: absolute;
    /* bottom: 173px; */
    /* bottom:29%; */
    top: 71vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}
.sliderModel {
    margin: 0 5px;
    margin-left: 54px;
    width: calc( 100% - 109px );
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 9;
}
.sliderLeft {
    width: 66px;
    height: 28px;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}
.storeIcon {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 71px;
    right: 16px;

}

.meanList {
    width: 344px;
    height: 89px;
    position: absolute;
    top: 85vh;
    left: 50%;
    transform: translateX(-50%);
}
.chooseMean {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>
